<template>
  <page-container>
    <div class="statist-index-container">
      <div class="button-container">
        <button @click="setTimeRange('today')">今日统计</button>
        <button @click="setTimeRange('threeDays')">三日统计</button>
        <button @click="setTimeRange('oneWeek')">一周统计</button>
        <button @click="setTimeRange('oneMonth')">一个月统计</button>
      </div>
      <div class="charts-row">
        <div class="chart-container">
          <h3>商品销售统计图</h3>
          <div ref="salesChart" style="width: 48%; height: 300px; display: inline-block;"></div>
        </div>
        <div class="chart-container">
          <h3>商品 TOP 10</h3>
          <div ref="topDishesChart" style="width: 48%; height: 300px; display: inline-block;"></div>
        </div>
      </div>
    </div>
  </page-container>
</template>

<script>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

export default {
  setup() {
    const salesChart = ref(null);
    const topDishesChart = ref(null);
    let currentRange = 'today'; // 默认时间范围

    const initSalesChart = () => {
      const chart = echarts.init(salesChart.value);
      const option = getSalesChartOption(currentRange);
      chart.setOption(option);
    };

    const initTopDishesChart = () => {
      const chart = echarts.init(topDishesChart.value);
      const option = getTopDishesChartOption(currentRange);
      chart.setOption(option);
    };

    const getSalesChartOption = (range) => {
      // 根据时间范围生成不同的数据
      const data = generateSalesData(range);
      return {
        title: {
          text: '商品销售统计图',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          data: ['电子产品', '家居用品', '服装', '食品', '其他'],
          axisLabel: {
            interval: 0,
            rotate: 45
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: '销售量',
            type: 'bar',
            data: data,
            itemStyle: {
              color: function (params) {
                const colorList = ['#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B'];
                return colorList[params.dataIndex];
              }
            },
            animationDuration: 2000,
            animationEasing: 'cubicInOut'
          }
        ]
      };
    };

    const getTopDishesChartOption = (range) => {
      // 根据时间范围生成不同的数据
      const data = generateTopDishesData(range);
      return {
        title: {
          text: '商品 TOP 10',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          data: ['苹果手机', '小米手机', 'wfitT恤', '戴尔电脑', '运动鞋', '洗衣机', '高压锅', '鸭梨手机', '小米手表', '好友铅笔'],
          axisLabel: {
            interval: 0,
            rotate: 45
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: '销量',
            type: 'bar',
            data: data,
            itemStyle: {
              color: function (params) {
                const colorList = ['#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#91C7AE', '#749F83', '#CA8622', '#BDA29A', '#6E7074'];
                return colorList[params.dataIndex];
              }
            },
            animationDuration: 2000,
            animationEasing: 'cubicInOut'
          }
        ]
      };
    };

    const generateSalesData = (range) => {
      // 根据时间范围生成不同的数据
      switch (range) {
        case 'today':
          return [5, 20, 36, 10, 15];
        case 'threeDays':
          return [10, 30, 50, 15, 25];
        case 'oneWeek':
          return [15, 40, 60, 20, 30];
        case 'oneMonth':
          return [20, 50, 70, 25, 35];
        default:
          return [5, 20, 36, 10, 15];
      }
    };

    const generateTopDishesData = (range) => {
      // 根据时间范围生成不同的数据
      switch (range) {
        case 'today':
          return [120, 200, 150, 80, 70, 110, 130, 100, 90, 60];
        case 'threeDays':
          return [130, 210, 160, 90, 80, 120, 140, 110, 100, 70];
        case 'oneWeek':
          return [140, 220, 170, 100, 90, 130, 150, 120, 110, 80];
        case 'oneMonth':
          return [150, 230, 180, 110, 100, 140, 160, 130, 120, 90];
        default:
          return [120, 200, 150, 80, 70, 110, 130, 100, 90, 60];
      }
    };

    const setTimeRange = (range) => {
      currentRange = range;
      initSalesChart();
      initTopDishesChart();
    };

    onMounted(() => {
      initSalesChart();
      initTopDishesChart();
    });

    return {
      salesChart,
      topDishesChart,
      setTimeRange
    };
  }
};
</script>

<style scoped>
.statist-index-container {
  width: 100%;
  padding: 20px;
}

.button-container {
  margin-bottom: 20px;
}

.button-container button {
  margin-right: 10px;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #409EFF;
  color: white;
  cursor: pointer;
}

.button-container button:hover {
  background-color: #66b1ff;
}

.charts-row {
  display: flex;
  justify-content: space-between;
}

.chart-container {
  width: 48%;
  margin-top: 40px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #fff;
}

.chart-container h3 {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
</style>